<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入组件库 -->
		<style>
			/* .app1{
			       padding-left:300px
			} */
			html,
			body,
			.wraper,
			#app {
				height: 100%;
				width: 100%;
				overflow: hidden;
			}

			textarea {
				width: 100%;
			}

			body,
			pre {
				padding: 0;
				margin: 0;

			}

			.el-menu-vertical-demo:not(.el-menu--collapse) {
				width: 200px;
				min-height: 100%;
			}


			.sidebar {
				display: block;
				position: absolute;
				left: 0;
				top: 70px;
				bottom: 0;

			}

			.sidebar>ul {
				height: calc(100% - 56px);
				overflow-y: auto;
			}

			.content-box {
				position: absolute;
				left: 200px;
				right: 0;
				top: 70px;
				bottom: 0;
				padding-bottom: 30px;
				-webkit-transition: left .3s ease-in-out;
				transition: left .3s ease-in-out;
				background: #f0f0f0;
				overflow-y: auto;
				height: calc(100% - 70px);
			}

			.header {
				position: relative;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				width: 100%;
				height: 70px;
				font-size: 22px;
			}

			.content-collapse {
				left: 65px;
			}

			.i-collapse {
				text-align: center;
				transform: rotate(180deg);
				transition: left .3s ease-in-out;

			}

			.switchCollapse {
				text-align: right;
				font-size: 22px;
			}

			#topicTable .el-input {
				width: 100%;

			}

			#topicTable .el-input input {
				border-width: 0;
				background-color: transparent;

			}

			.line {
				text-align: right;
				padding-right: 5px;
			}

			#topicForm {
				padding: 10px;

			}

			footer {
				margin-top: 5px;
			}
			span.week{
			  display:inline-flex;
			  width:30px;
			  height:30px;
			  background-color:#409eff;
			  align-items:center;
			  justify-content: center;
			  border-radius: 50%;
			  font-weight: bold;
					  color:white;
					  margin: 2px;
					  
			}
		</style>
	</head>
	<body>
		<div class="app1" id="userList">
			<div class="wraper">

				<!-- 	         <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
				  <el-radio-button :label="false">展开</el-radio-button>
				  <el-radio-button :label="true">收起</el-radio-button>
				</el-radio-group> -->
				<el-header class="header">


				</el-header>
				<div class="sidebar">

					<el-tooltip class="item" effect="dark" content="展开/收起" placement="right-start">
						<div class="el-submenu__title switchCollapse" index="1"
							@click="function(){isCollapse = !isCollapse;}">
							<i class="el-icon-s-unfold" v-bind:class="{ 'i-collapse': !isCollapse }"></i>
						</div>
					</el-tooltip>

					<el-menu default-active="2-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose1"
						:collapse="isCollapse" @select="handleSelect" background-color="#00824a" text-color="#fff"
						mode="vertical" active-text-color="#9bd9ff">
						<!-- 展开收缩按钮 -->
						<!-- <el-menu-item index="1" @click = "function(){isCollapse = !isCollapse}" class="switchCollapse">
				    <i class="el-icon-s-unfold" v-bind:class="{ 'i-collapse': !isCollapse }"></i>
				  </el-menu-item> -->
						<!-- Topic一级菜单 -->
						<el-submenu index="2">
							<template slot="title">
								<i class="el-icon-s-opportunity"></i>
								<span>Topic</span>
							</template>
							<el-menu-item index="2-1" v-if="myTopicNav"><i class="el-icon-chat-line-round"></i>My Topic
							</el-menu-item>
							<el-menu-item index="2-2" v-if="deptMgrNav"><i class="el-icon-user-solid"></i>User List
							</el-menu-item>
							<el-menu-item index="2-3"><i class="el-icon-s-grid"></i>Topic Total</el-menu-item>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">
								<i class="el-icon-s-opportunity"></i>
								<span>Report</span>
							</template>
							<el-menu-item index="3-1"><i class="el-icon-chat-line-round"></i>My Report</el-menu-item>
							<el-menu-item index="3-2"><i class="el-icon-user-solid"></i>User Report</el-menu-item>
							<el-menu-item index="3-3"><i class="el-icon-s-grid"></i>Total Report</el-menu-item>
						</el-submenu>

						<el-menu-item index="4">
							<i class="el-icon-setting"></i>
							<span slot="title">My Profile</span>
						</el-menu-item>
					</el-menu>


				</div>

				<div class="content-box" v-bind:class="{ 'content-collapse': isCollapse }">

					<!-- 我的Topic -->

					<el-table id="topicTable" v-if="content == '2-1'" :data="myTopicData" border resizable
						:max-height="height" style="width: 100%">
						<el-table-column fixed label="No." type="index" align="center" width="50">
						</el-table-column>
						<el-table-column fixed prop="user" label="User" width="100">
						</el-table-column>
						<el-table-column label="Date" width="160">
							<template slot-scope="{row,$index}">
								<el-date-picker readOnly v-model="tes.date" v-if="te === $index">{{tes.date}}
								</el-date-picker>
								<el-date-picker readOnly v-model="row.date" v-else>{{ row.date }}</el-date-picker>
							</template>
						</el-table-column>

						<el-table-column label="Topic" width="120">
							<template slot-scope="{row,$index}">
								<pre v-if="te === $index">{{tes.topic}}</pre>
								<pre v-else>{{ row.topic }}</pre>
							</template>
						</el-table-column>
						<el-table-column label="Action Plan" width="120">
							<template slot-scope="{row,$index}">
								<pre v-if="te === $index">{{ tes.actionPlan }}</pre>
								<pre v-else>{{ row.actionPlan }}</pre>
							</template>
						</el-table-column>
						<el-table-column label="Month" width="120">
							<template slot-scope="{row,$index}">
								<span type="text" v-if="te === $index">{{ tes.month  }}月</span>
								<span v-else>{{ row.month }}月</span>
							</template>
						</el-table-column>
						<el-table-column prop="week" label="Week" width="120">
							<template slot-scope="{row,$index}">
								<span type="text" v-if="te === $index">{{ tes.week  }}</span>
								<span v-else>{{ row.week }}周</span>
							</template>
						</el-table-column>
						<el-table-column prop="Status" label="Status" width="120">
							<template slot-scope="{row,$index}">
								<span type="text" v-if="te === $index">{{ tes.status }}</span>
								<span v-else>{{ row.status }}</span>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" min-width="100">
							<template slot-scope="scope">
								<el-button @click="topicDelete(scope)" type="danger" size="small" icon="el-icon-delete"
									circle></el-button>
								<el-button @click="topicEdit(scope)" type="primary" size="small" icon="el-icon-edit"
									circle></el-button>
							</template>
						</el-table-column>
					</el-table>

					<!-- 用户清单 -->
                     <div v-if="content == '2-2'">
					<el-table  :data="userList" border :max-height="height" @expand-change="expandRow"
						style="width: 100%">
						<el-table-column fixed label="No." type="index" align="center" width="50">
						</el-table-column>
						<el-table-column fixed prop="user" label="User" width="120">
						</el-table-column>
						<el-table-column type="expand" fixed  label = "Case" width = "60">
						      <template slot-scope="props">
						          <span class = "week" v-for = "i in 52">{{i}}</span>
						      </template>
						    </el-table-column>
					
						<el-table-column prop="email" label="Email" width="120">
						</el-table-column>

						<el-table-column prop="dept" label="Department" width="120">
						</el-table-column>
						<!-- person Status -->
						<!-- On job ; Leval:Date Year and month  -->
						<el-table-column prop="ps" label="Person Status" width="80" align="center">
						</el-table-column>
						<el-table-column prop="n1" label="N+1/Deptment Mgr" width="120">
						</el-table-column>
						<el-table-column prop="n1Email" label="N+1/Deptment Mgr Email" width="150">
						</el-table-column>
						<el-table-column prop="key" label="Key N-1" width="50" align="center">
						</el-table-column>
						<el-table-column fixed="right" label="操作" min-width="100">
							<template slot-scope="scope">
								<el-button @click="openView1(scope)" type="text" size="small">View</el-button>
								<el-button type="text" size="small">编辑</el-button>
							</template>
						</el-table-column>
					</el-table>
					</div>

					<el-table v-if="content == '2-3'" :data="topicTotalData" border resizable :max-height="height"
						style="width: 100%">
						<el-table-column fixed label="No." type="index">
						</el-table-column>
						<el-table-column fixed prop="user" label="User" width="150">
						</el-table-column>
						<el-table-column prop="date" label="Date" width="160">
						</el-table-column>
						<el-table-column prop="topic" label="Topic" width="120">
						</el-table-column>
						<el-table-column prop="actionPlan" label="Action Plan" width="120">
						</el-table-column>
						<el-table-column prop="month" label="Month" width="120">
						</el-table-column>
						<el-table-column prop="week" label="Week" width="120">
						</el-table-column>
						<el-table-column prop="status" label="Status" width="120">
						</el-table-column>

					</el-table>

					<div v-if="content == '3-1'" :data="myTopicData" border resizable :max-height="height">
						my Report</div>

					<div v-if="content == '3-2'" :data="myTopicData" border resizable :max-height="height">
						User Report
					</div>
					<div v-if="content == '3-3'" :data="myTopicData" border resizable :max-height="height">
						Total Report
					</div>
					<div v-if="content == '4'" :data="myTopicData" border resizable :max-height="height">
						My Setting
					</div>
					<footer>
						<el-button v-if="content == '2-1'" @click="topicNew" type="primary" icon="el-icon-circle-plus"
							style="margin-left:25px;">New</el-button>

					</footer>
					<el-drawer title="Topic Edit" :visible.sync="drawer" direction="rtl" :before-close="handleClose"
						size="40%">

						<el-form :model="tes" :rules="rules" ref="tes" id="topicForm" label-width="30%">
							<el-form-item label="Date" prop="date">
								<el-date-picker :picker-options="pickerOptions" v-model="tes.date"></el-date-picker>
							</el-form-item>
							<el-form-item label="Topic" prop="topic">
								<el-input type="textarea" v-model="tes.topic"></el-input>
							</el-form-item>
							<el-form-item label="Action Plan" prop="actionPlan">
								<el-input type="textarea" v-model="tes.actionPlan"></el-input>
							</el-form-item>
							<el-form-item label="Month">
								<el-col :span="10">
									<el-input type="text" readOnly v-model="tes.month + '月'" style="width: 100%;">
									</el-input>
								</el-col>
								<el-col class="line" :span="4">Week</el-col>
								<el-col :span="10">
									<el-input type="text" readOnly v-model="tes.week + '周'" style="width: 100%;">
									</el-input>
								</el-col>
							</el-form-item>
							<el-form-item label="Status" prop="status">
								<el-select v-model="tes.status" placeholder="请选择活动区域">
									<el-option label="Completed" value="Completed"></el-option>
									<el-option label="Ongoing" value="Ongoing"></el-option>
									<el-option label="Stop" value="Stop"></el-option>
									<el-option label="Pending" value="Pending"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="topicSubmit('tes')">确定</el-button>
								<el-button @click="drawerClose">取消</el-button>
							</el-form-item>

						</el-form>
					</el-drawer>
					<el-drawer title="View" :visible.sync="drawer1" direction="rtl" :before-close="colseView1"
						size="40%">
						<span v-for="i in 52">1</span>

					</el-drawer>
				</div>

			</div>
		</div>
		<style>
			.demo-table-expand {
				font-size: 0;
			}

			.demo-table-expand label {
				width: 90px;
				color: #99a9bf;
			}

			.demo-table-expand .el-form-item {
				margin-right: 0;
				margin-bottom: 0;
				width: 50%;
			}
		</style>
	</body>

	<script src="./js.js" type="text/javascript" charset="utf-8"></script>

</html>
